<template>
  <div>
    <div class="flex gap-4">
      <div class="flex-1">
        <a-row :gutter="24">
          <div v-auth>
            <a-col :span="24">
              <a-card :title="t['基站列表']" :bordered="false" :body-style="{ padding: `10px 0` }">
                <a-table
                  v-bind="comTableConfig"
                  :columns="translateColumns(newStationColumns)"
                  :data="newStationData"
                >
                  <template #option="{ record }">
                    <a-button type="text" @click="selectNewStation(record)">
                      <IconCheck />
                    </a-button>
                  </template>
                </a-table>
              </a-card>
            </a-col>
          </div>
          <a-col :span="24">
            <a-form :model="stationForm" layout="vertical" @submit-success="handleSubmit">
              <a-form-item
                field="stationName"
                :rules="{ required: true, message: t['校验失败'] }"
                :label="t['基站名称']"
                :message="t['必填']"
              >
                <a-input v-model="stationForm.stationName" />
              </a-form-item>
              <a-form-item
                field="stationNum"
                :rules="{ required: true, message: t['校验失败'] }"
                :label="t['基站编码']"
                disabled
              >
                <a-input v-model="stationForm.stationNum" />
              </a-form-item>
              <a-form-item disabled field="stationIp" :label="t['基站IP']">
                <a-auto-complete v-model="stationForm.stationIp" :data="IPData" />
              </a-form-item>
              <a-form-item field="mac" :label="t['MAC地址']" disabled>
                <a-auto-complete v-model="stationForm.mac" :data="MacData" />
              </a-form-item>
              <a-form-item>
                <div class="flex justify-between w-full">
                  <a-button type="outline" html-type="submit">
                    {{ t["确定"] }}
                  </a-button>
                  <a-popover trigger="click" position="tr">
                    <template #content>
                      <div style="width: 300px">
                        <div class="flex flex-col">
                          <h3>{{ t["更新基站"] }}</h3>
                          <a-select
                            v-model="upgradeConfig.type"
                            :options="updateOptions"
                          ></a-select>
                          <a-button @click="upload">
                            {{ t["上传文件"] }}
                            <IconUpload />
                          </a-button>
                          <div class="flex flex-nowrap">
                            <div class="text-nowrap">{{ t["文件"] }}</div>
                            <a-tag>
                              {{ upgradeConfig.uri || t["未上传"] }}
                            </a-tag>
                          </div>

                          <a-button type="primary" @click="upgrade">
                            {{ t["上传"] }}
                          </a-button>
                        </div>
                      </div>
                    </template>
                    <a-button v-if="stationForm.stationId">
                      {{ t["更新"] }}
                      <IconCaretUp />
                    </a-button>
                  </a-popover>
                </div>
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
      <BulkCreated v-auth class="flex-1" />
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  addStation,
  getStationNews,
  updateStation,
  upgradeStation
} from "@/api/service/station/station";
import { NewStation } from "@/api/service/station/types";
import { updateFile } from "@/api/service/utils";
import useTableConfig from "@/hook/useTableConfig";

import { useUploadFile } from "@/utils/file";

import { Message } from "@arco-design/web-vue";

import { newStationColumns, showStation } from "../data";
import { stationColumns } from "../table/column";
import BulkCreated from "./BulkCreated.vue";
import { stationForm } from "./data";

const newStationData = ref<NewStation[]>([]);
const t = translate("公共模块");
const IPData = ["192.168.0.164"];
const MacData = ["46:90:52:5D:32:1E"];
const { comTableConfig } = useTableConfig(stationColumns);

const upgradeConfig = ref({
  type: 0,
  uri: null,
  id: ""
});

const handleSubmit = async () => {
  let msg = "";
  if (stationForm.value.stationId) {
    const res = await updateStation(stationForm.value);
    msg = res.msg;
  } else {
    const res = await addStation(stationForm.value);
    msg = res.msg;
  }

  Message.success(msg);
  showStation.value = false;
};

const updateOptions = [
  {
    label: t.value?.["网关应用"],
    value: 0
  },
  {
    label: t.value?.["基站射频"],
    value: 1
  },
  {
    label: "webSocket",
    value: 2
  }
];

const selectNewStation = (item: NewStation) => {
  stationForm.value.stationIp = item.stationIp;
  stationForm.value.stationNum = item.stationNum;
  stationForm.value.mac = item.mac;
};
const upload = async () => {
  const file = await useUploadFile();
  const result = await updateFile(file);
  upgradeConfig.value.uri = result.data.data as any;
};

/**
 * 注释: 基站升级
 *
 * */
const upgrade = async () => {
  upgradeConfig.value.id = stationForm.value.stationId;
  upgradeStation(upgradeConfig.value);
};

onMounted(async () => {
  const data = await getStationNews();
  newStationData.value = data.data;
});
</script>

<style lang="scss" scoped></style>
